<template>
  <div>
    <el-form :inline="true" :model="queryParams"  size="mini">
      <el-form-item :label="$t('name')">
        <el-input v-model="queryParams.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="requestData" icon="el-icon-search">{{ $t('search') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 100%">
      <el-table-column
              prop="name"
              :label="$t('name')">
      </el-table-column>
        <el-table-column
            prop="logo"
            :label="$t('logo')">
            <template slot-scope="scope">
                <el-image
                    style="width: 150px;"
                    :src="scope.row.logo"
                    :preview-src-list="[scope.row.logo]"></el-image>
            </template>
        </el-table-column>
        <el-table-column
            prop="legal_person"
            :label="$t('legal_person')">
        </el-table-column>
        <el-table-column
            prop="license"
            :label="$t('license')">
            <template slot-scope="scope">
                <el-image
                    style="width: 150px;"
                    :src="scope.row.license"
                    :preview-src-list="[scope.row.license]"></el-image>
            </template>
        </el-table-column>
      <el-table-column
              prop="time"
              :label="$t('createdAt') + '/' + $t('updatedAt')">
          <template slot-scope="scope">
              {{scope.row.created_at}} <br> {{scope.row.updated_at}}
          </template>
      </el-table-column>
      <el-table-column
              fixed="right"
              :label="$t('actions')"
              >
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  v-if="checkPermission"
                  @click="handleCheckShow(scope.$index, scope.row)">{{ $t('check') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mo-page"
                   @current-change="requestData"
                   :current-page.sync="pagination.currentPage"
                   :page-size="pagination.pageSize"
                   layout="total, prev, pager, next, jumper"
                   :total="pagination.total">
    </el-pagination>

      <el-dialog :title="$t('check')" :visible.sync="dialogCheckFormVisible" width="30%">
          <el-form :model="checkForm" ref="checkForm">
              <el-form-item :label="$t('status')" prop="name" :label-width="formLabelWidth">
                  <el-radio v-model="checkForm.status" label="1" border>审核拒绝</el-radio>
                  <el-radio v-model="checkForm.status" label="2" border>审核通过</el-radio>
              </el-form-item>
              <el-form-item v-if="checkForm.status == 1" :label="$t('reason')" prop="reason" :label-width="formLabelWidth">
                  <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入拒绝理由"
                      v-model="checkForm.opt_reason">
                  </el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogCheckFormVisible = false">{{ $t('cancel') }}</el-button>
              <el-button type="primary" @click="handleCheck">{{ $t('confirm') }}</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
  import { storeIndex, storeCheck } from '../../../api/check'
  import { responseDataFormat, tableDefaultData, editSuccess, addSuccess, deleteSuccess, checkSuccess } from '../../../libs/tableDataHandle'
  import { hasPermission } from '../../../libs/permission'
  import notify from '../../../libs/notify'
  import { queryParams } from "../../../mixins/queryParams"
  import {addPermission} from "../../../api/permission";

  export default {
    name: 'checkStoreIndex',
    mixins:[queryParams],
    data() {
      return {
        ...tableDefaultData(),
          checkForm: {
            id:'',
            status:'',
              opt_reason:'',
          }
      }
    },
    methods: {
        handleCheckShow(index, row) {
            this.dialogCheckFormVisible = true
            this.checkForm.id = row.id;
        },
        handleCheck() {
            storeCheck(this.checkForm).then(response => {
                checkSuccess(this)
                this.checkForm = {}
                this.requestData()
            })
        },
        requestData() {
            this.loading = true
            storeIndex({...this.queryParams, page: this.queryPage}).then( response => {
                responseDataFormat(response, this)
            })
        },
    },
    computed: {
        checkPermission: function() {
            return hasPermission('check.store')
        }
    },
      created() {
      this.requestData()
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}
.avatar {
    width: 150px;
    height: 150px;
    display: block;
}
</style>
